<template>
  <c-main-template minHeight="auto" :isBreadcrumb="false">
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">银行名称：</div>
          <el-input
            size="large"
            placeholder="请输入银行名称"
            v-model="querys.id"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="17">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mt-lg"
    minHeight="auto"
    title="银行配置"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button size="large" type="primary" @click="handleBankAdd">
        <span>新增银行</span>
      </el-button>
    </template>
    <c-table-template :data="tableData">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="开户行名称" prop="bankName" align="left" />
      <el-table-column label="支行名称" prop="bankBranchName" align="left" />
      <el-table-column label="银行账号" prop="accountNo" align="center" />
      <el-table-column label="账户名称" prop="accountName" align="left" />
      <el-table-column label="创建时间" align="left" width="200">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
          >
            <span>编辑</span>
          </el-button>
          <el-button
            link
            class="mr-sm"
            type="danger"
            size="small"
            @click="handleDel(scope.row)"
          >
            <span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
  <c-bank-form ref="cBankFormRef" @change="handleSelect()" />
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { ElMessageBox, ElMessage } from "element-plus";
import cBankForm from "./components/c-bank-form.vue";
const { proxy } = getCurrentInstance();

const cBankFormRef = ref();
const handleBankAdd = () => {
  cBankFormRef.value.handleOpen();
};

const handleEdit = (item) => {
  cBankFormRef.value.handleOpen(item);
};
const handleDel = (item) => {
  ElMessageBox.confirm("是否确认此操作?", "提醒", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const url = `/sellerBankList/delete?id=${item.id}`;
    proxy.$post({ url }).then((res) => {
      ElMessage.success("删除成功");
      handleSelect();
    });
  });
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
  handleReset,
} = useBasicsTable({
  url: "/sellerBankList/page",
});
</script>